<script setup>
import { ref } from 'vue';

const textareaValue = ref('');
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">TextArea Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic TextArea</h3>
        <div class="flex flex-col space-y-4">
          <TextArea
            v-model="textareaValue"
            placeholder="Enter your comments here..."
            resize="both"
          />
          <div>Current value: {{ textareaValue }}</div>

          <TextArea
            placeholder="Disabled textarea"
            disabled
            value="This text area is disabled"
          />

          <TextArea placeholder="Required textarea" required />

          <TextArea
            placeholder="Textarea with character count"
            :maxlength="100"
            show-count
          />
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">TextArea Variations</h3>
        <div class="flex flex-col space-y-4">
          <div>
            <h4 class="mb-2 text-sm font-medium">Appearance Variations</h4>
            <TextArea
              appearance="outline"
              placeholder="Outline appearance (default)"
            />
            <TextArea
              appearance="filled"
              placeholder="Filled appearance"
              class="mt-4"
            />
            <TextArea
              appearance="underline"
              placeholder="Underline appearance"
              class="mt-4"
            />
          </div>

          <div class="mt-4">
            <h4 class="mb-2 text-sm font-medium">Size Variations</h4>
            <TextArea size="small" placeholder="Small size" class="mt-2" />
            <TextArea
              size="medium"
              placeholder="Medium size (default)"
              class="mt-4"
            />
            <TextArea size="large" placeholder="Large size" class="mt-4" />
          </div>

          <div class="mt-4">
            <h4 class="mb-2 text-sm font-medium">Resize Options</h4>
            <TextArea resize="none" placeholder="No resize" class="mt-2" />
            <TextArea
              resize="horizontal"
              placeholder="Horizontal resize only"
              class="mt-4"
            />
            <TextArea
              resize="vertical"
              placeholder="Vertical resize only"
              class="mt-4"
            />
          </div>

          <div class="mt-4">
            <h4 class="mb-2 text-sm font-medium">Auto Height</h4>
            <TextArea
              placeholder="This textarea will grow with content..."
              auto-height
              :rows="3"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
